<template>
	<w-container class="flex flex-dir-col blind-box">
		<w-navbar :placeholder="true" >
			<template #left>
				<view class="flex flex-ai-center">
					<w-icon @click="backPage()" name="arrow-left-back" size="38"></w-icon>
					<view v-if="info.num > 1 && !isOpen" class="flex flex-dir-col font-color-white ml-8">
						<view class="">节日系列盲盒</view>
						<view class="font-size-12">当前可拆{{ info.num }}个</view>
					</view>
				</view>
			</template>
			<template v-if="isOpen" #center>
				<view class="huode-text">恭喜您获得</view>
			</template>
		</w-navbar>
		<view class="flex flex-dir-col flex-ai-center" style="height: 60vh;">
			<BlindboxsOpen v-if="!isOpen" ref="box" :info="info" :prize-img="prizeImg" :replace-map="replaceMap" @opened="onOpened" />
			<view v-else class="" style="height: 600px;">
				<view class="result-box flex flex-ai-center flex-js-center">
					<view class="result-value flex flex-ai-center flex-js-center">
						<w-image v-if="openInfo.length" :src="openInfo[0].rarity_icon" :width="201" :height="280"></w-image>
					</view>
				</view>
			</view>
			<w-image src="/static/bg/open-box-zuo.png" :width="251" :height="86"></w-image>
		</view>
		<view class="flex flex-ai-center flex-js-sb plr-16 mt-12">
			<view @click="playAgain(1)" class="open-btn one">
				<view class="open-nei">开一个</view>
			</view>
			<view @click="playAgain(10)" class="open-btn one">
				<view class="open-nei">开全部</view>
			</view>
			<view @click="$u.route('/pages/consignments/consignments',{id:info.id,pageType:1})" class="qujishou-btn one">
				<view class="qujishou-nei">去寄售</view>
			</view>
		</view>
		<view class="blind-list-box mt-16 pb-12">
			<block v-if="!isOpen">
				<view class="font-size-14 font-color-white mlr-18 mt-20 mb-16">开盒可获得一下藏品任意一个</view>
				<w-scroll-view>
					<view class="flex flex-ai-center pl-18">
						<view v-for="(item,index) in collectionlist" :key="item.id" class="blind-item">
							<view class="image-box">
								<w-image :src="item.listimg" width="100%" :height="90" radius="8px 8px 0 0"></w-image>
								<view class="rarity-icon flex flex-ai-center flex-js-center pa-8">
									<w-image :src="item.rarity_icon" mode="heightFix" :height="7"></w-image>
								</view>
							</view>
							<view class="gailv-box">
								<view class="text-name">概率</view>
								<view class="gailv-value flex flex-ai-center flex-js-center">{{ item.probability }}%</view>
							</view>
						</view>
					</view>
				</w-scroll-view>
			</block>
			<block v-else>
				<view v-if="openInfo.length" class="flex flex-dir-col flex-ai-center">
					<view class="text-center mt-28 font-color-white font-w-bold">{{ openInfo[0].name }}#{{ openInfo[0].collection_code }}</view>
					<view class="flex flex-ai-center mt-15">
						<w-image src="/static/bg/xyd-bg.png" :width="40" mode="widthFix"></w-image>
						<w-image :src="openInfo[0].rarity_icon" width="59" height="55"></w-image>
					</view>
					<view class="w-100 flex flex-ai-center flex-js-sa plr-16 mt-28">
						<view @click="$u.route({type:'switchTab',url:'/pages/index/index'})" class="open-btn two">
							<view class="open-nei">继续购买</view>
						</view>
						<view @click="backPage()" class="qujishou-btn two">
							<view class="qujishou-nei">返回</view>
						</view>
					</view>
					<view class="tips">商品将陆续从链上转入个人中心，可能会有延误，请耐心等待</view>
				</view>
			</block>
		</view>
		<!-- <view class="content flex-1">
			<view class="con flex flex-dir-col flex-ai-center flex-js-center">
				<w-image :src="info.listimg" radius="10" width="258" height="258"></w-image>
				<text class="font-size-16 font-color-black font-w-500 mt-40">{{handleLang('共有')}}{{ info.num }}{{handleLang('个')}}</text>
				<w-button  class="btnStyle2 mt-16" @click="$u.throttle(open, 5000)">{{handleLang('一键开启')}}</w-button>
				<text class="font-size-12 font-color-describe mt-8">{{handleLang('一次最多打开10个盲盒')}}</text>
			</view>
			<u-popup :show="showPop" @close="showPop=false">
				<view class="pop_con">
					<image :src="$ossUrl+'/static/gif/mh.gif'" mode="aspectFill"></image>
				</view>
			</u-popup>
		</view>
		<view class="bg-color-item ptb-10">
			<view class="flex-center-sb plr-20">
				<w-button class="btnStyle" pain @click="$u.route('/pages/consignments/consignments',{id:info.id,pageType:1})">{{handleLang('立即寄售')}}</w-button>
				<w-button class="btnStyle"  @click="$u.throttle(takeApart, 1000)">{{handleLang('逐个拆开')}}</w-button>
			</view>
			<u-safe-bottom></u-safe-bottom>
		</view> -->
	</w-container>
</template>

<script>
	import {
	} from '@/api/box/index.js'
	import { openBox,openBoxs,getBoxDetails } from '@/api/box/index.js';
	import BlindboxsOpen from './components/BlindboxsOpen';
	import jsonData from "@/static/allBlindBox.json";
	export default {
		data() {
			return {
				showPop: false,
				prizeImg: '/static/my-bg.png',
				replaceMap: {},
				audio: null,
				jsonData,
				collectionlist:[],
				isOpen:false,
				isOpenAll:false,
				openInfo:[]
			};
		},
		components: {
			BlindboxsOpen
		},
		computed:{
			info(){
				return uni.getStorageSync('blindBoxInfo')
			}
		},
		mounted() {
			// this.audio = uni.createInnerAudioContext();
			// this.audio.src = '/static/open.mp3';
			this.getDetails()
		},
		methods:{
			changePrize() {
				this.prizeImg = '/static/bg/my-bg.png';
			},
			playAgain(opennumber = 1) {
				this.isOpenAll = !!opennumber > 1
				if(opennumber == 1) this.$u.throttle(this.takeApart(), 1000)
				if(opennumber > 1) this.$u.throttle(this.open(), 5000)
			},
			onOpened() {
				// this.audio && this.audio.play();
				this.isOpen = true
				if(this.isOpenAll) uni.redirectTo({ url:'/pages/blindBox/result' })
			},
			async getDetails() {
				this.loading = true
				try {
					let blindBoxInfo = uni.getStorageSync('blindBoxInfo')
					let res = await getBoxDetails(blindBoxInfo.blindBoxId)
					this.collectionlist = res.data.collectionlist || []
				} catch (e) {
					setTimeout(() => {
						this.backPage()
					}, 1500)
				} finally {
					uni.stopPullDownRefresh()
					this.loading = false;
				}
			},
			// 一键开启
			open() {
				uni.showLoading({ title:'请求中...' })
				openBoxs(this.info.blindBoxId).then(res=>{
					// this.showPop = true;
					this.$refs.box.replay();
					setTimeout(()=>{
						this.showPop = false;
						uni.setStorageSync('blindBoxResultList',res.data);
						// uni.redirectTo({ url:'/pages/blindBox/result' })
					},3000)
				}).catch(()=>{})
			},
			
			// 逐个拆开
			takeApart() {
				uni.showLoading({ title:'请求中...' })
				openBox(this.info.blindBoxId).then(res=>{
					// this.showPop = true;
					this.$refs.box.replay();
					setTimeout(()=>{
						this.showPop = false;
						uni.setStorageSync('blindBoxResult',res.data);
						// uni.redirectTo({ url:'/pages/blindBox/result2' })
					},3000)
				}).catch(()=>{})
			}
		}
	}
</script>
<style>
	page {
		background-color: #131111;
	}
</style>
<style lang="scss">
	.blind-box {
		width: 100%;
		height: 100vh;
		background: url($IMG_URL + '/static/bg/blind-bg.png') no-repeat;
		background-size: 100% 100%;
	}
	.blind-list-box {
		width: 100%;
		// height: 174px;
		background: #131111;
		border-radius: 16px 16px 0px 0px;
		.blind-item {
			min-width: 180rpx;
			max-width: 180rpx;
			height: 228rpx;
			background: #201E1D;
			border-radius: 8px 8px 8px 8px;
			margin-right: 16rpx;
			.image-box {
				width: 100%;
				height: 180rpx;
				position: relative;
				.rarity-icon {
					width: 32px;
					height: 15px;
					background: rgba(6, 6, 6, 0.6);
					border-radius: 8px 0px 8px 0px;
					position: absolute;
					top: 0;
					left: 0;
				}
			}
			.gailv-box {
				width: 100%;
				height: calc(100% - 180rpx);
				background-color: #201E1D;
				position: relative;
				padding-left: 14rpx;
				.text-name {
					height: 100%;
					font-family: OPPO Sans 4.0, OPPO Sans 40;
					font-weight: 300;
					font-size: 11px;
					color: #00F5AB;
					display: flex;
					align-items: center;
				}
				.gailv-value {
					width: 112rpx;
					height: 54rpx;
					position: absolute;
					right: 0;
					bottom: 0;
					background-image: url($IMG_URL + '/static/bg/gailv-bg.png');
					background-size: 100% 100%;
					color: #001F09;
					font-family: Alimama ShuHeiTi, Alimama ShuHeiTi;
					font-weight: bold;
					font-size: 14px;
				}
			}
		}
	}
	.btnStyle{
		width: 320rpx;
		height: 92rpx;
		line-height: 92rpx;
		border-radius: 50rpx;
	}
	.btnStyle2{
		width: 336rpx;
		height: 92rpx;
		line-height: 92rpx;
		border-radius: 20rpx;
	}
	.content{
		position: relative;
		>.con{
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%,-50%);
		}
	}
	.pop_con{
		width: 100vw;
		height: 100vh;
		>image{
			width: 100%;
			height: 100%;
		}
	}
	.open-btn {
		background: linear-gradient( 180deg, #4E7CF9 0%, #1F56FB 100%);
		border-radius: 24px 24px 24px 24px;
		border: 1px solid #A8BAF5;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		.open-nei {
			width: 80%;
			height: 80%;
			background: linear-gradient( 180deg, rgba(255,255,255,0.25) 0%, rgba(255,255,255,0) 50%, rgba(255,255,255,0) 100%);
			border-radius: 18px 18px 18px 18px;
			font-family: Source Han Sans CN VF, Source Han Sans CN VF;
			font-weight: 800;
			font-size: 35rpx;
			color: #FFFFFF;
			display: flex;
			align-items: center;
			justify-content: center;
			position: relative;
		}
	}
	.qujishou-btn {
		background: linear-gradient( 180deg, #83FED6 0%, #0AF4AB 100%);
		border-radius: 24px 24px 24px 24px;
		border: 1px solid #A8BAF5;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		.qujishou-nei {
			background: linear-gradient( 180deg, rgba(255,255,255,0.25) 0%, rgba(255,255,255,0) 50%, rgba(255,255,255,0) 100%);
			border-radius: 18px 18px 18px 18px;
			color: #0D1B0E;
			display: flex;
			align-items: center;
			justify-content: center;
			position: relative;
			font-weight: 800;
			font-size: 35rpx;
		}
		
	}
	.one {
		width: 218rpx;
		height: 94rpx;
	}
	.two {
		width: 166px;
		height: 47px;
	}
	.huode-text {
		font-family: Alimama ShuHeiTi, Alimama ShuHeiTi;
		font-weight: bold;
		font-size: 28px;
		color: #FFFFFF;
	}
	.result-box {
		width: 310px;
		height: 316px;
		background: linear-gradient( 180deg, rgba(255,255,255,0.65) 0%, rgba(255,255,255,0.1) 100%);
		border-radius: 22px 22px 22px 22px;
		margin-top: 100rpx;
		.result-value {
			width: 233px;
			height: 312px;
			background-image: url($IMG_URL + '/static/bg/result-value-bg.png');
			background-size: 100% 100%;
		}
		
	}
	.tips {
		font-family: OPPO Sans 4.0, OPPO Sans 40;
		font-weight: 400;
		font-size: 12px;
		color: #807F7F;
		margin-top: 48rpx;
	}
</style>
